<template>
  <!-- <div class="flex"> -->
  <div class="searchNav">
    <!-- 切换检索 -->
    <p
      v-for="(list, idx) in tabList"
      :key="list.value"
      :class="{ active: activeI == idx }"
      @click="changeTab(list.value, idx)"
    >
      {{ list.label }}
    </p>
  </div>
  <!-- <div class="btn-con">
      <el-button
        v-if="ctNavID == 'patent'"
        type="primary"
        size="small"
        @click="toAnalysis"
        >专利分析</el-button
      >
      <el-button
        v-if="ctNavID == 'paper'"
        type="primary"
        size="small"
        @click="toAnalysis"
        >论文分析</el-button
      >
    </div> -->
  <!-- </div> -->
</template>
<script>
const TABLIST = [
  {
    label: "智能检索",
    value: "0",
  },
  {
    label: "高级检索",
    value: "1",
  },
  {
    label: "扩展检索",
    value: "2",
  },
  {
    label: "语义检索",
    value: "3",
  },
  // {
  //   label: "查新检索",
  //   value: "4",
  // },
  // {
  //   label: "无效检索",
  //   value: "5",
  // },
];
export default {
  props: {
    ctNavID: {
      type: String,
      default: "",
    },
    showRange: {
      type: Number,
      default: 6,
    },
    activeIndex: {
      type: Number,
    },
  },
  data() {
    return {
      activeI: 0,
      tabList: [],
    };
  },
  watch: {
    showRange: {
      handler() {
        this.initTabList();
      },
      immediate: true,
    },
    activeIndex: {
      handler() {
        this.activeI = this.activeIndex;
      },
      immediate: true,
    },
  },
  methods: {
    // 跳转新界面
    toAnalysis() {
      this.$nextTick(() => {
        let routerUrl = this.$router.resolve({
          name: "Analysis",
          query: {
            type: this.ctNavID,
          },
        });
        window.open(routerUrl.href, "_blank");
      });
    },
    initTabList() {
      this.activeI = 0;
      this.tabList = this.copyObject(TABLIST).splice(0, this.showRange);
    },
    changeTab(value, idx) {
      this.activeI = idx;
      this.$emit("changeTab", value);
    },
  },
};
</script>
<style lang="scss" scoped>
.searchNav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: 12px;
  flex: 1;
  p {
    position: relative;
    width: 96px;
    line-height: 40px;
    margin: 0;
    text-align: center;
    font-size: 16px;
    color: $color10;
    cursor: pointer;
    &.active {
      font-weight: 600;
      color: $mainColor;
    }
    &:after {
      position: absolute;
      top: 50%;
      right: 0;
      width: 1px;
      height: 20px;
      margin-top: -10px;
      background-color: $color143;
      content: "";
    }
    &:last-of-type {
      &:after {
        content: none;
      }
    }
  }
}
.btn-con {
  margin-right: 80px;
}
</style>
